<template>
  <tlbs-map
    ref="map"
    api-key="OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"
    :center="center"
    :zoom="zoom"
    :control="control"
    @click="onClick"
  >
    <tlbs-multi-marker
      :geometries="geometries2"
      :styles="styles"
      :options="options"
    />
    <tlbs-multi-polygon
      :geometries="geometries"
      :styles="styles"
      :options="options"
    />
    <tlbs-multi-label
      :geometries="geometries3"
      :styles="styles"
      :options="options"
    />
  </tlbs-map>
</template>
<script lang="ts">
const paths = [
  { lat: 34.50914303601814, lng: 110.88855699892679 },
  { lat: 34.50899390864333, lng: 110.88855431787397 },
  { lat: 34.508981757514114, lng: 110.88875539762842 },
  { lat: 34.509138617417335, lng: 110.88878891093191 },
  { lat: 34.50913419883314, lng: 110.88870177636136 },
]

export default defineComponent({
  name: 'PolygonDemo',
  setup() {
    const map = ref(null)
    const center = ref({ lat: 34.50900495512502, lng: 110.88871116008386 })
    const zoom = ref(20)
    const onClick = (e: Event) => {
      console.log(e)
    }
    return {
      center,
      zoom,
      onClick,
      control: {
        scale: {},
        zoom: {
          position: 'topRight',
        },
      },
      map,
      geometries: [
        {
          id: 'polygon', // 多边形图形数据的标志信息
          styleId: 'polygon', // 样式id
          paths, // 多边形的位置信息
          properties: {
            // 多边形的属性数据
            title: 'polygon',
          },
        },
      ],
      geometries2: [
        {
          styleId: 'marker',
          position: { lat: 34.50908495057422, lng: 110.88866794437877 },
        },
      ],
      geometries3: [
        {
          id: 'label_1',
          styleId: 'label',
          content: '鑫星化玻',
          position: { lat: 34.50907788691376, lng: 110.88866824832076 },
        },
      ],
      styles: {
        marker: {
          width: 20,
          height: 30,
          anchor: { x: 10, y: 30 },
        },
        polygon: {
          color: 'rgba(41,91,255,0.16)',
          showBorder: true,
          borderColor: 'rgba(41,91,255,1)',
        },
      },
      options: {
        zIndex: 1,
      },
    }
  },
})
</script>
